<template>
	<view class="bg-gray" style="height: 100vh;">
		<u-sticky bgColor="#F6F6FB">
			<my-tabs :list="list" @change='tabsChange'></my-tabs>
		</u-sticky>
		<view class="row-between bg-gray" style="flex-wrap: wrap;padding: 20rpx 16rpx 20rpx; 16rpx">
			<view class="" style="width: 49%; margin-bottom: 60rpx;" v-for="item in getHeadPotraitArr[tabIndex].HeadPotraitList" @click="goMultigraphDetails(item.id)" >
				<view class="">
					<image :src="item.backgroundImgIdUrl" style="width: 100%; height: 200rpx; border-radius: 6rpx;"  mode=""></image>
				</view>
				<view class="row padding-horizontal-small" style="margin-top: -40rpx;">
					<view class="">
						<image :src="item.headImgUrl" style="width: 100rpx; height: 100rpx; border:4rpx solid #fff; border-radius: 100rpx;"  mode=""></image>
					</view>
					<view class="">
						<view class="font-color-white font-size-medium padding-small" style="margin-top: -10rpx; font-size: 24rpx;">
							{{item.nickname}}
						</view>
						<view class="padding-small font-color-black" style="font-size: 20rpx;margin-top: 20rpx;">
							{{item.keyword}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { multigraphDetails } from "@/service/index.js";
	export default {
		data() {
			return {
				list: [{
				    name: '精选',
				}, {
				    name: '男生',
				}, {
				    name: '女生'
				}, {
				    name: '情侣'
				}, {
				    name: '少年星期'
				}, {
				    name: '玩具星球'
				}, {
				    name: '美女'
				}, {
				    name: '萝莉'
				}, {
				    name: '嘻哈'
				},{
				    name: '游戏'
				},{
				    name: '影视'
				}],
				getHeadPotraitArr:[],
				tabIndex:0
			}
		},
		created() {
			this.HeadPotraitArrInit()
		},
		methods: {
			//头像数据
			HeadPotraitArrInit() {
				this.list.forEach(item => {
					let HeadPotraitItem = {
						categoryName: item.name,
						HeadPotraitList: []
					}
					this.getHeadPotraitArr.push(HeadPotraitItem)
				})
				this.getHeadPotrait(this.list[0].name)
			},
			getHeadPotrait(categoryName) {
				// let headPotrait = await getIndexData(categoryName)
				this.getHeadPotraitArr.forEach((item, index) => {
					if (item.categoryName == categoryName && item.HeadPotraitList.length == 0) {
						multigraphDetails(categoryName).then(res=>{
							let headPotrait = res
							this.getHeadPotraitArr[index].HeadPotraitList = headPotrait.data[categoryName]
						})
					}
				})
				console.log('处理完成的头像数组', this.getHeadPotraitArr);
			},
			tabsChange(e) {
				this.tabIndex = e.index
				this.getHeadPotrait(e.name)
			},
			goMultigraphDetails(id){
				this.$link.goTo('/headPortrait/multigraph-details/multigraph-details?id='+id)
			}
		}
	}
</script>

<style>

</style>
